<template>
  <div class="mapMarksInfo-container">
    <SliteMapViewer @ready="loadMap" :config="config"></SliteMapViewer>
    <template v-if="showPointInfoTips && pointInfo.length > 0">
      <template v-for="(item, index) in pointInfo">
        <div
          class="info-container"
          :ref="`tipsPointRef${index}`"
          :key="`${item.ip}ke`"
        >
          <div class="info-item">
            <div class="info-left">
              <i
                style="
                  cursor: pointer;
                  color: white !important;
                  position: absolute;
                  right: 5px;
                  margin-top: 4px;
                  font-size: 16px;
                "
                class="el-icon-circle-close"
                @click="closeInfo"
              ></i>
              <p class="titleinfo" v-if="item.type != null">{{ item.type }}</p>
              <p class="titleinfo" v-if="item.type == null">摄像头信息</p>
              <p v-if="item.ip != null" class="info">品牌：{{item.cameraBrand}}</p>
              <p
                v-if="
                  item.ip == null &&
                  item.ip_start != null &&
                  item.ip_end != null
                "
                class="info"
              >
                IP：{{ item.ip_start + "至" + item.ip_end }}
              </p>
              <p class="info">经度：{{ item.oldLon || "暂无" }}</p>
              <p class="info">纬度：{{ item.oldLat || "暂无" }}</p>
              <el-row>
                <el-col :span="11">
                  <p class="info">
                    <el-button
                      size="mini"
                      type="primary"
                      @click="videoInfo(item)"
                      >视频信息</el-button
                    >
                  </p>
                </el-col>
                <el-col :offset="1" :span="11">
                  <p class="info">
                    <el-button
                      size="mini"
                      type="primary"
                      @click="toantiLocalizationdetail(item)"
                      >查看详情</el-button
                    >
                  </p>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </template>
    </template>
  </div>
</template>
<script>
import SliteMapViewer from "./SliteMapViewer.vue";
import markerRed from "@/assets/images/map/marker-icon/cameraBlue.png";
import markBlue from "@/assets/images/map/marker-icon/markerBlue.png";
import star5 from "@/assets/images/map/marker-icon/star5.png";
import * as ol from "@/plugins/map/utils/openLayer";
import "ol/ol.css";
import { LineString } from "ol/geom";

export default {
  components: { SliteMapViewer },
  props: {},
  data() {
    return {
      route: "",
      radius: "",
      maxZoom: "",
      displayLevel: "",
      showPointInfo: false,
      showPointInfoTips: false,
      pointInfo: [],
      dialogVisible: false,
      isSchematic: false,
      currentMarksList: [],
      config: {
        locationConfig: {
          show: false,
        },
      },
      mapClass: undefined,
      regionConfig: {},
    };
  },
  watch: {},
  computed: {},
  methods: {
    toantiLocalizationdetail(item) {
      this.$router.push(`/positionAnalysis/cameraManagementD?id=${item.id}`);
    },
    videoInfo(item) {
      // Open a new window with a fixed size  cameraViewurl
      window.open(item.cameraViewurl, "_blank", "width=600,height=400");
    },
    /**
     *
     * @param {*} res 为json格式，包含经纬度(lng,lat)，半径(radius)，和要渲染到地图上的点位列表（points）,units:单位
     */
    setData(res = {}) {
      this.route = res?.route;
      this.radius = res?.radius;
      this.displayLevel = res?.displayLevel;
      this.isSchematic = res?.isSchematic;
      this.showPointInfo = res?.showPointInfo;
      this.showPointInfoTips = res?.showPointInfoTips;
      this.addPointMarks(res?.points, res?.trajectoryPoints);
      if (res?.lat && res?.lng && res?.radius) {
        // 有区域
        this.regionConfig = [
          {
            lng: res?.lng,
            lat: res?.lat,
            radius: res?.radius + res?.radius * 0.35,
            units: res.units,
            style: {
              //可以单独设置，不设置，默认找lineConfig->drawEndStyle
              fillColor: "rgba(0, 255, 255, 0.2)",
              strokeColor: "#67b7ec",
              strokeLineDash: [10, 10],
              strokeWidth: 4,
            },
          },
        ];
        this.addArea();
      } else {
        this.mapClass.onRemoveLayer("id", "DrawShapLayer");
      }
    },

    loadMap(map) {
      this.mapClass = map;
    },
    /**
     * 绘制圆
     */
    addArea() {
      if (this.mapClass.getLayer("id", "DrawShapLayer").length > 0) {
        this.mapClass.onRemoveLayer("id", "DrawShapLayer");
      }
      this.mapClass.addLayer({
        type: "DrawShapLayer",
        shapConfig: {
          type: "CustomCircle",
          dataType: "corrdinates", // 数据类型 有wkt,geogson,corrdinates 等三种类型
          data: this.regionConfig,
          isMultipleBool: false, // 不允许多个存在 false-> 不允许，true -> 允许
          onlyShow: true,
        },
        lineConfig: {
          // 线条样式设置
          drawEndStyle: {
            //  统一设置图像 绘制完成样式设置
            fillColor: "rgba(121,187,255,.3)",
            strokeColor: "rgba(255,0,255,.3)",
            strokeLineDash: [0, 0],
            strokeWidth: 2,
          },
        },
      });
    },
    addPointMarks(points, trajectoryPoints) {
      if (this.mapClass.getLayer("id", "MarkerLayer").length > 0) {
        this.mapClass.onRemoveLayer("id", "MarkerLayer");
      }
      /**
       * 未选中样式
       */
      let markStyle = [
        {
          type: "singleMark",
          legend: 1,
          pointType: "image",
          style: {
            url: markerRed,
          },
        },
        {
          type: "singleMark",
          legend: 2,
          pointType: "image",
          style: {
            url: markBlue,
          },
        },
        {
          type: "singleMark",
          legend: 3,
          pointType: "image",
          style: {
            url: star5,
          },
        },
      ];
      this.mapClass.addLayer({
        type: "MarkerLayer",
        layerStyle: markStyle,
        points,
        actions: [
          {
            type: "click",
            hitTolerance: 10, // 命中容差
            handle: this.handleMarkClick,
          },
        ],
      });
      var lineStringGeometry = new LineString(trajectoryPoints);
      var routeFeature = new ol.Feature({
        geometry: lineStringGeometry,
        geometry: lineStringGeometry,
      });
      if (
        this.route == "address" &&
        points?.length == 1 &&
        this.displayLevel == "城市级"
      ) {
        //地理位置查询-单个ip--城市级
        this.maxZoom = 10;
      } else if (
        this.route == "address" &&
        points?.length == 1 &&
        this.displayLevel == "街道级"
      ) {
        //地理位置查询-单个ip--街道级
        this.maxZoom = 18;
      } else if (this.route == "area" && this.radius == 5) {
        this.maxZoom = 12.5;
      } else if (this.route == "area" && this.radius == 1) {
        this.maxZoom = 14;
      } else if (this.route == "area" && this.radius == 2) {
        this.maxZoom = 13.5;
      } else if (this.route == "area" && this.radius == 0.5) {
        this.maxZoom = 14.5;
      } else if (this.route == "area" && this.radius == 0.1) {
        this.maxZoom = 16.5;
      } else {
        this.maxZoom = 16;
      }
      var extent = routeFeature.getGeometry().getExtent();
      this.mapClass.map.getView().fit(extent, {
        size: this.mapClass.map.getSize(), // 当前地图容器的尺寸
        padding: [50, 50, 50, 50], // 可选的内边距，用于增加可视空间边缘距离
        maxZoom: this.maxZoom, // 可选的最大缩放级别限制
        duration: 900, // 可选的动画持续时间（单位：毫秒），如果希望平滑过渡
      });
    },
    handleMarkClick(list) {
      console.log('listlistlistlist',list);
      this.$emit("markClick", list);
      if (list?.length == 1) {
        this.showPointInfo = true;
        this.showPointInfoTips = true;
        this.pointInfo = list;
        let overlayerConfigs = [];
        if (this.pointInfo.length > 0) {
          if (this.showPointInfoTips) {
            // 显示信息窗口
            this.$nextTick(() => {
              for (let i in this.pointInfo) {
                let overlayer = {
                  id: `overlayerId${i}`,
                  element: this.$refs[`tipsPointRef${i}`][0],
                  position: [this.pointInfo[i].lng, this.pointInfo[i].lat],
                };
                overlayerConfigs.push(overlayer);
              }
              this.mapClass.addOverLayers(overlayerConfigs);
            });
          }
        }
      } else {
        this.showPointInfo = false;
        this.showPointInfoTips = false;
      }
    },
    closeInfo() {
      this.showPointInfoTips = false;
    },
  },
  created() {},
  mounted() {},
};
</script>
<style lang="scss" scoped>
.mapMarksInfo-container {
  width: 100%;
  height: 100%;
  .info-container {
    cursor: pointer;
    .info-item {
      display: flex;
      -webkit-flex-wrap: nowrap;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: start;
      .info-left {
        background-color: #103f68d4 !important;
        color: white;
        padding: 0 10px;
        opacity: 0.9;
        min-width: 16.714286rem;
        height: 16rem;
        border-radius: 10px;
        -webkit-flex-wrap: nowrap;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        background-size: contain;
        font-size: 1.214286rem;
        margin-top: -13.785714rem;
        text-align: center;
        .info {
          line-height: 14px;
        }
        .titleinfo {
          margin-top: 14px;
        }
      }
    }
  }
}
</style>
